<template>
  <div class="category">
    <van-nav-bar
      title="学校"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-dropdown-menu>
      <van-dropdown-item title="分类" v-model="value1">
        <van-tree-select
          :items="items"
          :active-id.sync="activeId"
          :main-active-index.sync="activeIndex"
          @click-item="clickItem"
        />
      </van-dropdown-item>
    </van-dropdown-menu>
    <shop-list :shops="shops"></shop-list>
  </div>
</template>
<script >
import ShopList from "../../components/shopList/ShopList.vue";
import { Toast } from "vant";
import { getFoodShops, getCategoryList } from "../../api/reques";
export default {
  components: { ShopList },
  data() {
    return {
      value1: 0,
      value2: 0,
      switch1: false,
      switch2: false,
      shops: [], //获得店铺数量
      items: [
        // {
        //     text: '分类', children: [
        //         { text: '筛选', children: [] },
        //     ]
        // },
      ],
      activeId: 1,
      activeIndex: 0,
      categoryId: 0,
      latitude: "333",
      longitude: "333",
    };
  },
  created() {
    this.getAAA({
      latitude: this.latitude,
      longitude: this.longitude,
    });
    getCategoryList({
      latitude: this.latitude,
      longitude: this.longitude,
    }).then((res) => {
      // console.log(res);
      this.items = this.getOption(res.data);
    });
  },
  methods: {
    onClickLeft() {
      Toast("返回");
      this.$router.back();
    },
    onConfirm() {
      this.$refs.item.toggle();
    },
    getAAA(data) {
      getFoodShops(data)
        .then((res) => {
          // console.log(res);
          this.shops = res.data;
          // console.log(this.shops);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取店铺分类
    getOption(data) {
      let optionArr = [];
      data.map((item) => {
        let optionItem = {
          id: 0,
          text: "",
        };
        if (item.sub_categories) {
          optionItem = {
            id: item.id,
            text: item.name,
            children: this.getOption(item.sub_categories),
          };
        } else {
          optionItem = {
            id: item.id,
            text: item.name,
          };
        }
        optionArr.push(optionItem);
      });
      // console.log(optionArr);
      return optionArr;
    },
    clickItem(data) {
      // console.log(data, 111);
      this.categoryId = data.id;
      console.log(this.categoryId);
      this.getAAA({
        latitude: this.latitude,
        longitude: this.longitude,
        "restaurant_category_ids[]": this.categoryId,
      });
    },
  },
};
</script>

<style scoped lang='scss'>
.van-nav-bar {
  background: rgb(2, 182, 253, 0.7);
}

.shops {
  background-color: #fff;
  padding: 10px 0;
  // margin-top: 70px;

  header {
    font-size: 14px;
    padding-left: 10px;
  }

  ul {
    margin-top: 10px;

    li {
      padding: 0 5px;
      margin: 10px 0;
      display: flex;
      align-items: center;

      img {
        width: 70px;
        border-radius: 10px;
        height: 70px;
      }

      .desc {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 12px;
        justify-content: space-around;
        margin: 0 10px;

        .name {
          font-size: 14px;
          font-weight: 600;
          text-overflow: ellipsis;
          overflow: hidden;
          width: 100px;
          white-space: nowrap;
        }

        .rate {
          margin: 10px 0;
        }
      }

      .other {
        width: 100px;
        display: flex;
        justify-content: space-around;
        flex-direction: column;
        font-size: 12px;

        .tags span {
          display: inline-block;
          padding: 2px;
          border-radius: 5px;
          border: 1px solid #eee;
        }

        .brand {
          margin: 10px 0;

          span {
            display: inline-block;
            padding: 2px;
            border-radius: 3px;
            border: 1px solid rgb(146, 146, 252);
          }
        }

        .time {
          font-size: 10px;
          color: rgb(116, 116, 116);
        }
      }
    }
  }
}
</style>
